<template>
    <div class="container" ref="echartsEle" width="100%"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
    name: "EchartsItem",
    props: ["option"],
    data() {
        return {

        }
    },
    methods: {
        initEcharts() {
            // 传入一个元素/css选择器 -> 作渲染echarts的元素
            var myEcharts = echarts.init(this.$refs.echartsEle);

            //传入一个对象  用于配置echarts中的x轴 y轴 标题 数据等
            myEcharts.setOption(this.option)
        }
    },
    watch:{
        option(){  //监听options数据发生改变 再次初始化
            console.log("option发生改变");
            this.$nextTick(()=>{
                this.initEcharts();
            })
        }
    },
    mounted(){
        console.log("接收数据option",this.option);
        this.initEcharts();  // 第一初始化时 数据还未请求到 -> 此时传入的数据时初始数据  (此时已经进行初始化,后面数据虽然更新,没有再次进行初始化)
    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 500px;
}
</style>